<template>
  <div class="pvModuleResult">
    <el-card>
      <el-form ref="form" :model="form" class="searchLine" label-width="120px">
        <el-form-item label="单位名称" class="searchItem">
          <el-select v-model="form.companyCode" size="small" placeholder="请选择单位" class="searchItemWidth" @change="companyChange" clearable filterable>
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站名称" class="searchItem">
          <el-select v-model="form.stationCode" size="small" placeholder="请选择场站" class="searchItemWidth" @change="stationChange" clearable filterable>
            <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务开始时间" class="searchItem">
          <el-date-picker
             v-model="form.checkTime1"
             size="small"
             type="daterange"
             range-separator="-"
             class="searchItemWidth"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
        </el-form-item>
        <el-form-item label="任务编码" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.inspectTaskCode" size="small" placeholder="请选择任务编码" class="searchItemWidth" clearable filterable>
            <el-option v-for="item in taskList" :label="item.inspectTaskCode" :value="item.inspectTaskCode" :key="item.inspectTaskCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="诊断日期" class="searchItem" v-if="showAllItems">
          <el-date-picker
             v-model="form.checkTime"
             size="small"
             type="daterange"
             range-separator="-"
             class="searchItemWidth"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
        </el-form-item>
        <el-form-item label="诊断模型" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.title" size="small" placeholder="选择诊断模型" class="searchItemWidth" multiple clearable filterable>
            <el-option v-for="item in outerModelList" :label="item.diagModelName" :value="item.diagModelCode" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方阵编号" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.matrixNumber" size="small" placeholder="请选择方阵编号" class="searchItemWidth" @change="matrixNumberChange" clearable filterable>
            <el-option v-for="item in matrixList" :label="item.pvArrayCode" :value="item.pvArrayCode" :key="item.pvArrayCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组串编号" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.pvClusterNumber" size="small" placeholder="请选择光伏组串编号" class="searchItemWidth" @change="pvClusterChange" clearable filterable>
            <el-option v-for="item in pvArrayList" :label="item.pvStringCode" :value="item.pvStringCode" :key="item.pvStringCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组件编号" class="searchItem" v-if="showAllItems">
          <el-select v-model="form.pvModuleNumber" size="small" placeholder="请选择光伏组件编号" class="searchItemWidth" clearable filterable>
            <el-option v-for="item in pvModuleCodeList" :label="item.pvModuleCode" :value="item.pvModuleCode" :key="item.pvModuleCode"></el-option>
          </el-select>
        </el-form-item>
        <el-row style="text-align: right;">
          <el-button type="primary" icon="el-icon-search" size="small" @click="listSearch">查询</el-button>
          <el-button type="primary" size="small" @click="showAllItems = !showAllItems">高级搜索</el-button>
          <el-button @click="reset" size="small">重置</el-button>
        </el-row>
      </el-form>
    </el-card>
    <div class="lineBar">
      <div class="rightTitle">模型缺陷次数统计</div>
      <div class="lineContainer" ref="line"></div>
      <div class="barContainer" ref="bar"></div>
    </div>
    <!-- <el-card style="margin-top:10px;">
      <div class="title">
        数据详情表
        <span style="float:right;" @click="downloadFile">
          下载表格
        </span>
      </div>
      <el-table
       :data="tableData"
       size="small"
       tooltip-effect="dark"
       max-height="300"
       border
       stripe
       style="width: 100%">
       <el-table-column
         label="单位名称"
         prop="companyName"
         show-overflow-tooltip
         >
       </el-table-column>
       <el-table-column
         label="场站名称"
         prop="stationName"
         show-overflow-tooltip
         >
       </el-table-column>
       <el-table-column
         prop="pvArrayCode"
         show-overflow-tooltip
         label="方阵编号">
       </el-table-column>
       <el-table-column
         prop="inspectTaskCode"
         show-overflow-tooltip
         label="任务标号">
       </el-table-column>
       <el-table-column
         prop="inspectDay"
         show-overflow-tooltip
         label="时间">
       </el-table-column>
       <el-table-column
         prop="diagDay"
         show-overflow-tooltip
         label="诊断时间">
       </el-table-column>
       <el-table-column
         prop="diagModelName"
         show-overflow-tooltip
         label="诊断模型">
       </el-table-column>
       <el-table-column
         prop="defectiveCnt"
         show-overflow-tooltip
         label="缺陷次数">
       </el-table-column>
      </el-table>
    </el-card> -->
  </div>
</template>

<script>
  import echarts from 'echarts'
  import stationApi from "../../../api/stations"
  import matrixApi from "../../../api/matrix"
  import manualApi from "../../../api/manual"
  import pvClusterApi from "../../../api/pvCluster"
  import pvModuleApi from '../../../api/pvModule'
  import moment from 'moment'
  export default {
    name: "pvModuleResult",
    data () {
      return {
        showAllItems: false,
        tree: [],
        form: {
          companyCode: '',
          stationCode: '',
          matrixNumber: '',
          pvClusterNumber: '',
          pvModuleNumber:'',
          checkTime: null,
          checkTime1: null,
          title: [],
          inspectTaskCode: ''
        },
        outerModelList: [],
        pvModuleCodeList: [],
        tree: [],
        pvArrayList: [],
        matrixList: [],
        stationList: [],
        checkAll: '',
        isIndeterminate: true,
        selection: [],
        pageSize: 100,
        currentPage: 1,
        total: 0,
        // tableData: [],
        myChart: null,
        myChart1: null,
        taskList: [],
        downloadFileName: null,
        isFirstComeIn: true
      }
    },
    mounted() {
      this.getOuterModelList()
      this.getCompanies()
      this.myChart = echarts.init(this.$refs.line)
      this.myChart1 = echarts.init(this.$refs.bar)
      let that = this
      window.onresize = function() {
        that.myChart.resize()
        that.myChart1.resize()
      }
      this.initLine()
      this.initBar()

      this.$nextTick(() => {
        this.myChart.resize()
        this.myChart1.resize()
      })
      if (this.$route.query && this.$route.query.inspectTaskCode) {
        this.form.inspectTaskCode = this.$route.query.inspectTaskCode
        this.form.companyCode = this.$route.query.companyCode
        this.form.stationCode = this.$route.query.stationCode
        this.companyChange(this.$route.query.companyCode, true)
        this.stationChange(this.$route.query.stationCode)
      }
    },
    methods: {
      reset() {
        this.form = {
          companyCode: '',
          stationCode: '',
          matrixNumber: '',
          pvClusterNumber: '',
          pvModuleNumber:'',
          checkTime: null,
          checkTime1: null,
          title: [],
          inspectTaskCode: ''
        }
        this.listSearch()
      },
      getCompanies() {
        stationApi.getCompanyList().then(res => {
          if (res && res.data.code === 200) {
            this.tree = res.data.data
            if (this.isFirstComeIn && !(this.$route.query && this.$route.query.inspectTaskCode)) {
              this.form.companyCode = res.data.data[0].companyCode
              this.companyChange(res.data.data[0].companyCode)
            }
          }
        })
      },
      getOuterModelList() {
        manualApi.getOuterModelList().then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.outerModelList = res.data.data
          }
        })
      },
      companyChange(value, flag) {
        if (!flag) {
          this.stationList = []
          this.form.stationCode = ''
          this.matrixList = []
          this.form.matrixNumber = ''
          this.pvArrayList = []
          this.pvModuleCodeList = []
          this.form.pvClusterNumber = ''
          this.form.pvModuleCode = ''
        }
        if (!value) {
          return
        }
        manualApi.getStationByCompany({
          companyCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
            if (flag) {
              this.listSearch()
            }
            if (this.isFirstComeIn && !flag) {
              this.form.stationCode = res.data.data[0].stationCode
              this.listSearch()
              this.isFirstComeIn = false
            }
          }
        })
      },
      stationChange(value) {
        this.matrixList = []
        this.form.matrixNumber = ''
        this.pvArrayList = []
        this.form.pvClusterNumber = ''
        this.pvModuleCodeList = []
        this.form.pvModuleCode = ''
        this.form.inspectTaskCode = ''
        this.taskList = []
        if (!value) {
          return
        }
        matrixApi.getmatrixNummberByCompany({
          stationCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.matrixList = res.data.data
          }
        })
        matrixApi.listInspectTaskCode({
          stationCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.taskList = res.data.data
          }
        })
      },
      pvClusterChange(value) {
        this.pvModuleCodeList = []
        this.form.pvModuleCode = ''
        if (!value) {
          return
        }
        pvModuleApi.getpvModuleByPvCluster({
          pvStringCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.pvModuleCodeList = res.data.data
          }
        })
      },
      matrixNumberChange(value) {
        this.pvArrayList = []
        this.form.pvClusterNumber = ''
        this.pvModuleCodeList = []
        this.form.pvModuleCode = ''
        if (!value) {
          return
        }
        pvClusterApi.getpvClusterByMrtrixNumber({
          pvArrayCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.pvArrayList = res.data.data
          }
        })
      },
      tick() {
        this.$nextTick(() => {
          this.myChart.resize()
          this.myChart1.resize()
        })
      },
      initBar(data) {
        let data1 = [], data2 = []
        if (data) {
          data.map(item => {
            data1.push(item.diagModelCodeName)
            data2.push({
              value: item.modelDefectiveCnt,
              name: item.diagModelCodeName + '(' + item.modelDefectiveCnt + ')'
            })
          })
        }
        let total = 0
        data2.map(item => {
          total += Number(item.value || 0)
        })
        let option = {
          grid: {
            y: 40
          },
          title: {
            text: total,
            subtext: '',
            x: "center",
            y: "45%"
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: ({d}%)'
          },
          legend: {
            left: 'left',
            bottom: 'bottom',
            data: data1
          },
          color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#0FD5F9'}, {offset: 1, color: '#0487ED'}]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#FFFE95'}, {offset: 1, color: '#C1C049'}]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#FF9000'}, {offset: 1, color: '#FFCD5E'}]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#A2FFD0'}, {offset: 1, color: '#3EB076'}])
          ],
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['30%', '70%'],
              center: ["center", "50%"],
              data: data2,
              emphasis: {
                show: false,
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.myChart1.setOption(option)
      },
      initLine(data) {
        let xdata = [], ydata = []
        if (data) {
          data.map(item => {
            xdata.push(item.monthInfo)
            ydata.push(item.defectiveCnt)
          })
        }
        let option = {
          title: {
            text: '缺陷次数统计',
            textStyle: {
              color: '#3977F3'
            },
            x: 30,
            y: 20
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross'
              }
          },
            xAxis: {
                type: 'category',
                data: xdata,
                axisLabel: {
                  color: '#808080'
                },
                axisLine: {
                    lineStyle: {
                        color: '#f0f0f0'
                    }
                },
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#f0f0f0'
                    }
                },
                splitLine: {
                  lineStyle: {
                      color: '#f0f0f0'
                  }
                }
            },
            series: [{
                data: ydata,
                type: 'line',
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: 'rgba(0,168,255,1)'
                      }, {
                        offset: 1,
                        color: 'rgba(63,255,234,0)'
                      }
                    ])
                  }
                },
                lineStyle: {
                  color:'#3FFFEA'
                },
                itemStyle: {
                  color:'#3FFFEA'
                }
            }]
        }
        this.myChart.setOption(option)
      },
      handleCheckAllChange(val) {
        this.form.title = val ? [2, 3, 4] : []
        this.isIndeterminate = false
      },
      handleChange(value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === 3
        this.isIndeterminate = checkedCount > 0 && checkedCount < 3
      },
      listSearch() {
        stationApi.pvModuleResultSearch({
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode,
          pvArrayCode: this.form.matrixNumber,
          pvModuleCode: this.form.pvModuleNumber,
          pvStringCode: this.form.pvClusterNumber,
          diagDayStart: this.form.checkTime ? moment(this.form.checkTime[0]).format('YYYY-MM-DD') + ' 00:00:00' : '',
          diagDayEnd: this.form.checkTime ? moment(this.form.checkTime[1]).format('YYYY-MM-DD') + ' 23:59:59' : '',
          inspectDayEnd:this.form.checkTime1 ? moment(this.form.checkTime1[1]).format('YYYY-MM-DD') + ' 23:59:59' : '',
          inspectDayStart: this.form.checkTime1 ? moment(this.form.checkTime1[0]).format('YYYY-MM-DD') + ' 00:00:00' : '',
          modelTypeList: this.form.title ? this.form.title.join(',') : '',
          inspectTaskCode: this.form.inspectTaskCode
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.initLine(res.data.data && res.data.data.defectiveCntDTOS && res.data.data.defectiveCntDTOS)
            this.initBar(res.data.data && res.data.data.modelDefectiveCntdtos && res.data.data.modelDefectiveCntdtos)
            // this.tableData = res.data.data && res.data.data.dataTabledDetails && res.data.data.dataTabledDetails
            this.downloadFileName = res.data.data && res.data.data.downloadFileName && res.data.data.downloadFileName
          }
        })
      },
      // downloadFile() {
      //   if (!this.downloadFileName) return
      //   window.open('/bigdata-pv-backend/diagtask/downloadDataTable?downloadFilename=' + this.downloadFileName)
      // },
      handleSelectionChange(selection) {
        this.selection = selection
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.currentPage = currentPage
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pvModuleResult{
    .searchLine{
      .searchItem{
        display: inline-block;
        vertical-align: top;
      }
      .bigItem{
        width: 100%;
      }
    }
    .pagination{
      text-align: center;
      margin-top: 20px;
    }
    .lineBar{
      width: 100%;
      display:flex;
      flex-wrap: wrap;
      margin-top: 10px;
      padding-right: 450px;
      position: relative;
      .rightTitle{
        position: absolute;
        right: 285px;
        top:10px;
        color:#3977F3;
        font-size: 16px;
        z-index:999;
        font-weight: 600;
      }
      .lineContainer {
        flex: 1;
        height: 400px;
        margin-right: 10px;
        background: #fff;
        border-radius: 10px;
      }
      .barContainer {
        position: absolute;
        width: 450px;
        right:0;
        top:0;
        height:400px;
        background: #fff;
        border-radius: 10px;
        min-width: 450px;
      }
    }
    .title{
      font-size: 18px;
      margin: 20px 0;
      span{
        cursor: pointer;
        color:#409EFF;
        font-size: 14px;
        margin-left: 20px;
      }
    }
    .el-form-item{
      margin-bottom: 3px !important;
    }
  }
</style>
